<template>
  <view class="maskDiv mask">
    <view class='box'>
      <view class='title'>
        <Icon iconName='close' @click="closeMask"/>
        <text>记账备注</text>
        <text @click="closeMask">
          <Icon iconName='close'/>
        </text>
      </view>
      <view class='main'>
        <textarea v-model="notes" placeholder="请输入备注" maxlength="66"/>
        <view  class="btn" @click="sureText(notes)">确定</view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  props: {
    note: {
      type: String,
      default: ''
    }
  },
  created() {
    this.notes = this.note
  },
  data() {
    return { notes: '' }
  },
  methods: {
    closeMask() {
      this.$emit('closeMask', false)
    },
    sureText(notes) {
      if (notes !== '') {
        this.$emit('sureText', notes.trim())
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .mask{
    position:fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 998;
    transition: .3s;
  }
  .maskDiv {
    background-color: rgba(0, 0, 0, .6);
    z-index: 2;

    .box {
      border-radius: 20px;
      background-color: #fff;
      text-align: center;
      display: flex;
      flex-direction: column;
    }

    .title {
      display: flex;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: $uni-color-primary;
      font-size: 32rpx;
      padding: 20rpx;
    }

    .main {
      display: flex;
      flex-direction: column;
      padding: 10px 20px;

      textarea {
        outline: none;
        border: none;
        padding: 18rpx;
        font-size: 36rpx;
        border-radius: 10rpx;
        background-color: $uni-color-gray;
        text-align: left;
        height: 340rpx;
      }
      .btn{
        margin-top: 22rpx;
      }
    }
  }
</style>
